<template>
<div class="com_side_bar">
  <div class="sb_top">
    <div class="logo">
      <img src="../assets/dg_logo_g.png"/>
    </div>
    <div class="new_dialog">
      <div style="flex:1;text-align: center;">新建对话</div>
      <img @click="newDialog" src="../assets/new_dialog.png"/>
    </div>
  </div>
  <div class="sb_middle"
       v-loading="isLoading"
       element-loading-background="transparent"
       element-loading-text="加载中">
    <div class="sb_clear">
      <div class="bt_clear" @click="clearRecord">清空记录</div>
      <div class="clear_set" @click="showHistorySetting=true">
        <img src="../assets/icon_setting.png"/>
      </div>
    </div>
    <div class="sb_history_list"
         v-infinite-scroll="loadMoreData">
      <div class="history_item" v-for="(item,index) in historyList" :key="index">
        <div class="item_time">{{item.date}}</div>
        <div class="item_con">{{item.message}}</div>
      </div>
    </div>
  </div>

  <div class="sb_bottom">
    <div class="avatar">
      <img  src="../assets/avatar.svg"/>
    </div>
    <div @click="showLoginDialog = true" v-if="Object.keys(indexStore.userInfo).length === 0" style="cursor:pointer;">用户账号</div>
    <div v-else >{{indexStore.userInfo.userName}}</div>
    <img @click="funcShowUserSetting" class="btn_edit" src="../assets/icon_edit.png"/>
  </div>


  <history-setting @sub_event="subEvent" v-if="showHistorySetting" :show="showHistorySetting"></history-setting>
  <user-setting @sub_event="subEvent" v-if="showUserSetting" :show="showUserSetting"></user-setting>
  <login-dialog @sub_event="subEvent" v-if="showLoginDialog" :show="showLoginDialog"></login-dialog>
</div>
</template>

<script>
import historySetting from "./historySetting.vue";
import userSetting from "./userSetting.vue";
import { useIndexStore } from "../stores/index.js";
import { mapStores } from "pinia";
import LoginDialog from "./loginDialog.vue";
import { getLeftHistoryList,clearHistory } from "../api";

export default {
  name: "sideBar",
  components:{
    LoginDialog,
    historySetting,userSetting
  },
  data(){
    return {
      showLoginDialog:false,
      showHistorySetting:false,
      showUserSetting:false,
      historyList:[],
      isLoading:false,
      loadingMore:false,
      pageNum:1,
      pageSize:10,
    }
  },
  computed:{
    ...mapStores(useIndexStore)
  },
  methods:{
    subEvent(param){
      if(param.act === "close_history_setting"){
        this.showHistorySetting = false;
      }else if(param.act === "setting_save_value"){
        this.showHistorySetting = false;
      }else if(param.act === "close_user_setting"){
        this.showUserSetting = false;
      }else if(param.act === "close_login_dialog"){
        this.showLoginDialog = false;
      }
    },
    clearRecord(){

      clearHistory().then(res => {
        if(res.code === 0){
          this.$message({
            type:"success",
            message:"记录已清空"
          });
          this.historyList = [];
        }else{
          this.$message.error({
            message:res.msg
          });
        }
      });
    },
    newDialog(){
      this.indexStore.sendNewDialogEvent();
      this.$emit("sub_event",{act:"new_dialog"});
    },
    funcShowUserSetting(){
      if(Object.keys(this.indexStore.userInfo).length > 0){
        this.showUserSetting = true;
      }else{
        this.showLoginDialog = true;
      }
    },
    getList(){
      getLeftHistoryList().then(res => {
        console.log(res);
        if(res.code === 0){
          for(let i in res.data) {
            if (!res.data[i].day) {
              res.data[i].date = "更早";
            } else if (res.data[i].day === 1) {
              res.data[i].date = "今天"
            } else if (res.data[i].day === 1) {
              res.data[i].date = "7天内";
            } else if (res.data[i].day === 30) {
              res.data[i].date = "30天内";
            } else{
              res.data[i].date = res.data[i].day+"天内";
            }
          }
          this.historyList = res.data;
        }
        this.isLoading = false;
        this.loadingMore = false;
      })
    },
    loadMoreData(){
      if(this.isLoading || !this.loadingMore){
        return;
      }
      this.isLoading=true;
      this.getList();
    }
  },
  watch:{
    "indexStore.needLoginEvent":function(v,o){
      if(v){
        this.showLoginDialog = true;
        this.indexStore.sendNoNeedLoginEvent();
      }
    },
    "indexStore.loginSuccessEvent":function(v,o){
      if(v){
        this.isLoading = false;
        this.loadingMore = true;
        this.loadMoreData();
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .com_side_bar{
    display:flex;
    flex-direction: column;
    padding:20px;
    width:100%;
    .sb_top{
      height:40px;
      display: flex;
      justify-content: space-between;
      .logo{
        width:40px;
        height:40px;
        display:flex;
        align-items: center;
        justify-content: center;
        img{
          max-height:35px;
        }
      }
      .new_dialog{
        flex:1;
        display:flex;
        justify-content: space-between;
        align-items: center;
        img{
          width:20px;
          height:20px;
          cursor:pointer
        }
      }
    }
    .sb_middle{
      flex:1;
      display:flex;
      flex-direction: column;
      overflow: auto;
      .sb_clear{
        display:flex;
        justify-content: space-between;
        font-size:10px;
        color:rgb(170, 170, 170);
        height:20px;
        margin:20px 0;
        .bt_clear{
          cursor:pointer;
        }
        .clear_set{
          width:15px;
          height:15px;
          cursor:pointer;
          img{
            width:100%;
            height:100%;
          }
        }
      }
    }
    .sb_history_list{
      flex:1;
      overflow:auto;
    }
    .history_item{
      margin-top:10px;
    }
    .item_time{
      font-size:10px;
      color:rgb(170, 170, 170);
    }
    .item_con{
      color: rgb(242, 242, 242);
      font-size:14px;
      margin-top:5px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 60px; /* 根据需求调整最大高度 */
      -webkit-line-clamp: 2;
    }
    .sb_bottom{
      height:40px;
      align-items: center;
      justify-content: space-between;
      display:flex;
      font-size:12px;
      .avatar{
        width:26px;
        height:26px;
        border:2px solid #00cc99;
        border-radius:30px;
        display:flex;
        align-items: center;
        justify-content: center;
        img{
          width:15px;
          height:15px;
        }
      }
      .btn_edit{
        width:20px;
        height:20px;
        cursor:pointer;
      }
    }
  }
</style>
